<template>
  <div class="row">
    <!--菜单-->
    <div class="col-12 mt-3 col-md-8" style="width: 100%">
      <table class="table">
        <thead class="thead-default">
        <tr>
          <td>尺寸</td>
          <td>价格</td>
          <td>加入</td>
        </tr>
        </thead>
        <tbody v-for="(item, index) of getMenuItems" :key="index">
        <tr>
          <td>
            <strong>{{item.name}}</strong>
          </td>
        </tr>
        <tr v-for="(option, index) of item.options" :key="index">
          <td>{{option.size}}寸</td>
          <td>{{option.price}}RMB</td>
          <td>
            <button class="btn btn-sm btn-outline-success" @click="addTo(item, option)">+</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <!--购物车-->
    <div class="col-12 col-md-4 mt-3">
      <div v-if="cart.length >0">
        <table class="table">
          <thead class="thead-default">
          <tr>
            <td>数量</td>
            <td>品种</td>
            <td>价格</td>
          </tr>
          </thead>
          <tbody v-for="(item, index) of cart" :key="index">
          <tr>
            <td>
              <button @click="decreaseNum(item)" class="btn btn-sm">-</button>
              <span>{{item.num}}</span>
              <button @click="increaseNum(item)" class="btn btn-sm">+</button>
            </td>
            <td>{{item.name + item.size}}寸</td>
            <td>{{item.price * item.num}}MRB</td>
          </tr>
          </tbody>
        </table>
        <p>总价：{{Total_price + 'RMB'}}</p>
        <button class="btn btn-success btn-block">提交</button>
      </div>
      <div v-else>
        {{tips}}
      </div>
    </div>
    {{cart}}
  </div>
</template>

<script>
import Bmob from 'hydrogen-js-sdk'
export default {
  name: 'Menu',
  data () {
    return {
      cart: [],
      tips: '您当前购物车是空的！'
      // getMenuItems: {}
    }
  },
  methods: {
    _getMenuItems () {
      // axios全局写法
      // this.http.get('x.json')
      //   .then(res => {
      //     this.getMenuItems = res.data
      //   })
      // 将请求的数据存储到VUEX中
      const query = Bmob.Query('newPizzaTable')
      query.find().then(data => {
        console.log(data)
        this.$store.commit('setMenuItems', data)
      })
    },
    addTo (item, option) {
      let carts = {
        name: item.name,
        size: option.size,
        price: option.price,
        num: 1
      }
      if (this.cart.length > 0) {
        // 过滤
        let result = this.cart.filter((carts) => {
          return (carts.name === item.name && carts.size === option.size && carts.price === option.price)
        })
        if (result != null && result.length > 0) {
          result[0].num++
        } else {
          this.cart.push(carts)
        }
      } else {
        this.cart.push(carts)
      }
    },
    decreaseNum (item) {
      item.num--
      if (item.num <= 0) {
        this.removeCart(item)
      }
    },
    increaseNum (item) {
      item.num++
    },
    // 当数量num为0的时候，则删除当前的商品栏 splice(start要删除的数组或者替换数组元素，删除数量，规定从start
    // 位置要插入的新元素)indexOf() 方法可返回数组中某个指定的元素位置。
    removeCart (item) {
      this.cart.splice(this.cart.indexOf(item), 1)
    }
  },
  created () {
    this._getMenuItems()
  },
  computed: {
    getMenuItems () {
      // vuex中获取数据
      return this.$store.state.menuItems
    },
    Total_price () {
      let total = 0
      for (let i in this.cart) { // this.cart就是点击添加后cart[]的内容
        let itemtoatl = this.cart[i]
        // 循环需要+=  要不然永远都是循环最后一位
        total += itemtoatl.num * itemtoatl.price
      }
      return total
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
